<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="${ctx!}/css/basic.css">
    <link rel="stylesheet" type="text/css" href="${ctx!}/css/button.css">
    <link rel="stylesheet" type="text/css" href="${ctx!}/css/jquery.mloading.css">
</head>
<body>
    <h1>链接校验小工具</h1>
    <div>
        <div class="div2">
            <textarea class="urls text-area"></textarea>
        </div>
        <div class="button1">
            <button class="button button-rounded button-normal" onclick="validate()">校验</button>
        </div>
    </div>
    <div class="result">
        <table class="table1" id="table-1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>链接</th>
                    <th>有效性</th>
                    <th>是否收录</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="${ctx}/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jquery.mloading.js"></script>
    <script>
        function validate(){
            $("body").mLoading({
                text:"请稍等...",//加载文字，默认值：...
                icon:"${ctx}/img/load.gif",//加载图标，默认值：一个小型的base64的gif图片
                html:false,//设置加载内容是否是html格式，默认值是false
                content:"",//忽略icon和text的值，直接在加载框中显示此值
                mask:true//是否显示遮罩效果，默认显示
            });
            $(".table1 tbody tr").remove()
            var urls = $(".urls").val();
            console.log($(".urls").val())
            $.ajax({
                type: "POST",
                data: {"urls": urls},
                url: "${ctx}/validate/urls",
                success: function(data){
                    $("body").mLoading("hide");//隐藏loading组件
                    console.log(data)
                    var html = ""
                    for(var i = 0; i < data.length; i++){
                        html += "<tr>"
                            + "<td>"+(i+1)+"</td>"
                            + "<td>"+data[i].title+"</td>"
                            + "<td><a href='"+data[i].url+"' target='_blank'>"+data[i].url+"</a></td>"
                            if(data[i].state == "有效"){ 
                                html += "<td>"+data[i].state+"</td>"
                            }else{
                                html += "<td style=\"color:red\">"+data[i].state+"</td>"
                            }
                            if(data[i].include == "已收录"){
                                html += "<td><a href='"+data[i].includeUrl+"' target='_blank'>"+data[i].include+"</a></td>"
                            }else{
                                html += "<td><a style=\"color:red\" href='"+data[i].includeUrl+"' target='_blank'>"+data[i].include+"</a></td>"
                            }
                            html += "</tr>"
                    }
                    $(".table1 tbody").append(html)
                    
                },
                error: function(){
                    $("body").mLoading("hide");//隐藏loading组件
                    alert("出错啦！让程序猿飞一会儿！")
                }
                
            })
        }
    </script>
</body>
</html>